<template>
  <van-pull-refresh class="pullrefresh-box" v-model="refreshLoading" @refresh="onRefresh">
    <van-list
      v-model="moreLoading"
      :finished="moreFinished"
      @load="onLoad">
      <div class="list-container">
        <ul class="user-page">
          <router-link tag="li" :to="{name: 'user-order-detail', query: {orderId: item.id, type: item.type}}" v-for="item in list" :key="item.id">
            <div class="imgOut" :style="{backgroundImage:`url(${item.imageUrl})`}">
              </div>
              <div class="info">
                <h3>{{item.name}}</h3>
                <p>时间：<span>{{item.orderDate}}</span></p>
                <p>地点：<span>{{item.address}}</span></p>
              </div>
              <!-- 0 取消 1 预约 200 完成 300 结束 -->
              <van-button v-if="item.status === 1"  class="state" round size="mini">{{item.statusStr}}</van-button>
              <van-button v-else class="state no" round disabled size="mini">{{item.statusStr}}</van-button>
          </router-link>
        </ul>
        <empty-data :empty="list.length === 0 && !moreLoading"></empty-data>
      </div>
    </van-list>
  </van-pull-refresh>
</template>

<script>
import { API_PHYSICAL_ORDERS } from '@/service/physical'
export default {
  name: 'user-train',
  data () {
    return {
      list: [],
      refreshLoading: false, // 下拉刷新loading状态
      moreLoading: false,
      moreFinished: false,
      pageNumber: 0,
      pageSize: 8
    }
  },
  mounted () {
  },
  methods: {
    requestData (callback) {
      let reqData = {
        pageNumber: this.pageNumber + 1,
        pageSize: this.pageSize
      }
      return API_PHYSICAL_ORDERS(reqData).then((resData) => {
        let { resultList, totalSize } = resData.list
        if (resultList.length <= 0) {
          this.moreFinished = true
        } else {
          this.pageNumber = this.pageNumber + 1
          callback && callback(resData)
          if (totalSize === this.list.length) {
            this.moreFinished = true
          }
        }
      }).catch(() => {
        this.moreFinished = true
      })
    },
    onLoad () {
      this.requestData((resData) => {
        let { resultList } = resData.list
        this.list = [...this.list, ...resultList]
      }).finally(() => {
        this.moreLoading = false
      })
    },
    onRefresh () {
      this.pageNumber = 0
      this.refreshLoading = true
      this.list = []
      this.requestData(resData => {
        let { resultList } = resData.list
        this.list = resultList
      }).finally(() => {
        this.refreshLoading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "./orders.less";
</style>
